<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <script type="text/javascript" src="../build/jsMotif.js"></script>
        
        <title>jsMotif example</title>
    </head>
    <body>

        <div id="mainContainer">
            <p fill="{foo}"></p>
            <ul fill="{each:bar}">
                <li fill="{name}"></li>
            </ul>
            <p fill="{bar[type=='abc'][0].name}"></p>
        </div>

        <script type="text/javascript">
            var obj = {
                foo: 123,
                bar: [
                    { type: 'abc', name: 'my name is abc' },
                    { type: 'def', name: 'my name is def' },
                    { type: 'ghi', name: 'my name is ghi' }
                ]
            }
            
            new jsMotif.Template({
                    template: 'mainContainer',
                    debug: jsMotif.errors.LVL.log
                }).render(obj);
        </script>
        
    </body>
</html>
